/*------------------------------------
    #TABS
/*------------------------------------

.tabs
  width: 50000px
  margin: 0
  padding-left: 14px

.tabs-container
  position: relative
  overflow: hidden

.tabs-header
  position: relative
  overflow: hidden

.tabs-tool
  position: absolute
  bottom: 0
  padding: 1px
  overflow: hidden

.tabs-scrolling
  margin-left: 18px
  margin-right: 18px

.tabs-scroller-left,
.tabs-scroller-right
  position: absolute
  top: auto
  bottom: 0
  display: none
  padding: 10px 4px
  background-color: $gray-light
  cursor: pointer
  text-align: center

.tabs-scroller-left
  left: 0

.tabs-scroller-right
  right: 0

.tabs-wrap
  position: relative
  left: 0
  width: 100%
  overflow: hidden

.tabs-disabled
  +opacity(0.3)

.tabs li
  position: relative
  display: inline-block
  &:not(:last-child)
    margin-right: 5px

.tabs-inner
  padding: 0 16px
  text-align: center
  white-space: nowrap

.tabs-selected
  &:hover
    & .tabs-inner
      cursor: default

.tabs-p-tool
  position: absolute
  top: 30%
  right: 8px
  display: block

.tabs-p-tool
  right: 16px

.tabs-p-tool a
  display: inline-block
  font-size: 1px
  width: 12px
  height: 12px
  margin: 0
  +opacity (0.6)

.tabs-p-tool
  &:hover
    +opacity(1)
    cursor: pointer

.tabs-with-icon
  padding-left: 18px

.tabs-icon
  position: absolute
  top: 50%
  left: 10px
  width: 16px
  height: 16px
  margin-top: -6px

.tabs-title
  font-size: 12px
  font-weight: 300

.tabs-closable
  padding-right: 8px

.tabs-panels
  padding: 12px
  border:
    right: 2px solid #d7d7d7
    bottom: 2px solid #d7d7d7
    left: 2px solid #d7d7d7
  background-color: lighten(#ededed, 10%)
  overflow: hidden

.tabs-transparent
  & .tabs-panels
    background-color: transparent
    border-color: transparent

.tabs-panels-top
  border:
    top: 2px solid #d7d7d7
    bottom: 0

.tabs-panels-right
  min-height: 250px
  border:
    top: 2px solid #d7d7d7
    left: 0

.tabs-panels-left
  min-height: 250px
  border:
    top: 2px solid #d7d7d7
    right: 0

//###
// Tabs Bottom
//
.tabs-header-bottom .tabs-tool
  top: 0

.tabs-header-bottom .tabs-scroller-left,
.tabs-header-bottom .tabs-scroller-right
  top: 0
  bottom: auto

.tabs-header-left
  float: left
  min-height: 250px

.tabs-header-right
  float: right
  min-height: 250px

.tabs-header-left .tabs-wrap,
.tabs-header-right .tabs-wrap
  height: 100%

.tabs-header-left .tabs
  height: 100%
  padding: 4px 0 0 0

.tabs-header-right .tabs
  height: 100%
  padding: 4px 0 0 0

.tabs-header-left .tabs li,
.tabs-header-right .tabs li
  display: block
  width: 100%
  position: relative

.tabs-header-left .tabs li
  left: auto
  right: 0
  float: right
  margin-right: 0
  margin-bottom: 5px

.tabs-header-right .tabs li
  left: 0
  right: auto
  margin: 0 0 4px 0
  float: left

.tabs-justified li a.tabs-inner
  padding-left: 0
  padding-right: 0

.tabs-header-left .tabs li a.tabs-inner
  display: block
  text-align: left
  padding-left: 10px
  padding-right: 10px

.tabs-header-right .tabs li a.tabs-inner
  display: block
  text-align: left
  padding-left: 10px
  padding-right: 10px

.tabs-panels-right
  float: right

.tabs-panels-left
  float: left

.tabs-pill
  padding-bottom: 3px

.tabs-header-bottom .tabs-pill
  padding-top: 3px
  padding-bottom: 0

.tabs-header-left .tabs-pill
  padding-right: 3px

.tabs-header-right .tabs-pill
  padding-left: 3px

.tabs-header .tabs-pill li a.tabs-inner
  +border-radius(2px)

.tabs-header-narrow,
.tabs-header-narrow .tabs-narrow
  padding: 0

.tabs-narrow li,
.tabs-header-bottom .tabs-narrow li
  margin-left: 0
  margin-right: -1px

.tabs-narrow li.tabs-last,
.tabs-header-bottom .tabs-narrow li.tabs-last
  margin-right: 0

.tabs-header-left .tabs-narrow,
.tabs-header-right .tabs-narrow
  padding-top: 0

.tabs-header-left .tabs-narrow li
  margin-bottom: -1px
  margin-right: -1px

.tabs-header-left .tabs-narrow li.tabs-last,
.tabs-header-right .tabs-narrow li.tabs-last
  margin-bottom: 0

.tabs-header-right .tabs-narrow li
  margin-bottom: -1px
  margin-left: -1px

.tabs-scroller-left
  &::before
    +font-icons(FontAwesome, '\f104', 15px, #000)

.tabs-scroller-right
  &::before
    +font-icons(FontAwesome, '\f105', 15px, #000)

.tabs-scroller-over
  background-color: #fff
  +transition(background-color, 0.28s, ease-in-out)

.tabs-close
  position: absolute
  top: 32%
  right: 4px
  display: table
  text-align: center
  line-height: 1
  &::before
    display: table-cell
    width: 15px
    height: 15px
    +font-icons(inherit, '×', 12px, #4E4C49)
    +transition(color 0.28s ease-in)
    vertical-align: middle
    line-height: 1
  &:hover::before
    content: "×"
    +border-radius (50%)
    background-color: #bd5151
    color: #fff
    +text-shadow(0 0 0 transparent)
    +transition(color 0.28s ease-out)

.tabs-inner
  position: relative
  +inline-block()
  +transform (translateZ(0))
  +backface-visibility (hidden)
  +transition(color 300ms ease-in-out)
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background-color: $tabs-link-bg
    +transform (scaleX(0))
    +transform-origin (0, 50%)
    +transition(transform 300ms ease-in-out)
    z-index: -1
  &:focus,
  &:hover
    color: $tabs-link-color
    &::before
      +transform (scaleX(1))

.tabs-selected
  & .tabs-inner
    background-color: $tabs-selected-bg
    color: $tabs-selected-color

.tabs-header,
.tabs-tool
  background-color: $tabs-header-bg

.tabs-header-plain
  background-color: transparent

.tabs-p-tool
  &:hover
    background-color: #eaf2ff

.tabs-header .tabs-pill li.tabs-selected a.tabs-inner
  background-color: #ffe48d
  color: #000

.tabs-panels-noborder
  border: 0
  background-color: transparent
